<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Graduate Profile</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">
		<!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
		<!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
		<!--script src="js/less-1.3.3.min.js"></script-->
		<!--append ‘#!watch’ to the browser URL, then refresh the page. -->
		<link href="css/video-default.css" rel="stylesheet">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
       	 <link  href="css/liquidcarousel.css" rel="stylesheet">
       	 <link id="colorpage" href="css/cc0000.css" rel="stylesheet">

       	<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
			<script src="js/html5shiv.js"></script>
		<![endif]-->

		<!-- Fav and touch icons -->
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
		<link rel="shortcut icon"  href="img/favicon.png">
		<link   href="css/custom.css" rel="stylesheet">
  
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript" src="js/scripts.js"></script>
		<script type="text/javascript" src="js/liquidcarousel.js"></script><!-- for technology -->
		<script type="text/javascript" src="js/jquery.liquidcarousel.pack.js"></script><!-- for technology -->
   

        <script>
			$(document).ready(
				function(){
					$('#liquid').liquidcarousel({
						height: 150,		//the height of the list
						duration: 100,		//the duration of the animation
						hidearrows: true	//hide arrows if all of the list items are visible
					});						
			});
		</script>
	</head>
	
	<body class="gradiant">
		<div class="container top-buffer">
			<div class="row clearfix" id="header">
				<div class="col-md-6 column" id="social">
						<ul>
            				<li><a class="facebook"></a></li>
               				<li><a class="google"></a></li>
                			<li><a class="twitter"></a></li>
                			<li><a class="linkedin"></a></li>
            			</ul>
        	
				</div>
				<div class="col-md-6 column">
					<img src="img/logo.png" id="logo" />
					<ul id="color">
						<li><a class="red" onClick="page_style('red');"></a></li>
						<li><a class="blue" onClick="page_style('blue');"></a></li>
						<li><a class="green" onClick="page_style('green');"></a></li>
						<li><a class="yellow" onClick="page_style('yellow');"></a></li>
					</ul>
				</div>
			</div>
			<div class="row clearfix" id="nav">
				<div class="col-md-12 column">
					<ul class="nav nav-pills">
						<li class="active">
							<a href="#">Home</a>
						</li>
						<li>
							<a href="#">Open Source </a>
						</li>
						<li>
							<a href="#">ITI</a>
						</li>
						<li class="dropdown">
        					<a href="#" class="dropdown-toggle" data-toggle="dropdown">Cources <b class="caret"></b></a>
        					<ul class="dropdown-menu">
          						<li><a href="#">PHP</a></li>
         						<li><a href="#">Ruby</a></li>
          						<li><a href="#">Apache</a></li>
          						<li class="divider"></li>
          						<li><a href="#">oprating System</a></li>
          						<li class="divider"></li>
          						<li><a href="#">Network</a></li>
        					</ul>
      					</li>
					</ul>
				</div>
			</div><!-- end nav -->
			
			<div class="panel panel-default">
				<div class="panel-body">


					<form role="form" class="form-horizontal" id="search">
						<div class = "row" >
							<label for="track" class="col-xs-1" >Track</label>
							<div class="col-xs-4">
								<select name="track" id="track" class="form-control">
									<option value="0"  >All Tracks</option>
									<option value="1"  >Open Source Applications Developer</option>
									<option value="2"  >Telecom Applications Developer</option>
								</select>
							</div>
					
							<label for="track" class="col-xs-1">Intake</label>
							<div class="col-xs-2">
								<select name="intake" id="intake" class="form-control">
									<option value="0"  >Any</option>
								</select>
							</div>
						
							<label for="name" class="col-xs-1" >Name</label>
							<div class="col-xs-3">
								<input type="text" name="name" id="name" class="form-control" placeholder="Enter Name Here" />
							</div>
						</div>
					</form>
				</div>
			</div>
			<div id="students-container">
				<ul id="std_info" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
					<li role="presentation">
						<a role="menuitem" tabindex="-1" href="#"> </a>
					</li>
				</ul>
				<img class='loading' src='images/3.gif'/>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height">
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height" >
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height" >
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height" >
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height" >
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height" >
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
				<div class="thumbnail item pull-left">
					<div class="img-thumbnail-height" >
						<img src="images/Flower-Wallpaper-flowers-249398_1693_1413.jpg" alt="Graduate Image" class="img-circle" />
					</div>
					<h3><a href='graduateprofile.html' >Student Name</a></h3>
					<span>Track name - intake IntakeNo.</span><br/>
					<span>Current Job</span>
				</div>
			</div>
			<div style="clear:both" >
			<div class="text-center" >
				<ul class="pagination ">
					<li><a href="#">&laquo;</a></li>
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li><a href="#">5</a></li>
					<li><a href="#">&raquo;</a></li>
				</ul>
			</div>
		</div>
		<!-- end services -->

		<div class="row clearfix">
			<div class="col-md-12 column">
				<h1>Open source Technologies</h1>
				<div id="sponser">
					<div id="sponserin" >
                        <div class="liquid" id="liquid">
                            <span class="previous"></span>
                            <div class="wrapper">
                                <ul>
                                    <li><a href="#"><img  src="img/1.png" alt="maknoon store"/></a></li>
                                    <li><a href="#"><img src="img/2.png"  alt="maknoon store"/></a></li>
                                    <li><a href="#"><img src="img/3.png"  alt="maknoon store"/></a></li>
                                    <li><a href="#"><img src="img/4.png"  alt="maknoon store"/></a></li>
                                    <li><a href="#"><img  src="img/1.png" alt="maknoon store"/></a></li>
                                    <li><a href="#"><img src="img/2.png"  alt="maknoon store"/></a></li>
                                    <li><a href="#"><img src="img/3.png"  alt="maknoon store"/></a></li>
                                    <li><a href="#"><img src="img/4.png"  alt="maknoon store"/></a></li>
                                </ul>
                            </div>
                            <span class="next"></span>
                        </div>
					</div>
				</div>
				<!-- end sponser-->            	
			</div>
		</div><!-- end collection -->
		<div id="footet">
			<footer>
				<div id="footer-widgets">
					<div class="width-container footer-4-column">
						<div id="text-2" class="widget ">
							<h5>About us</h5>
							<div class="textwidget">
								<p class="form-control-static">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
							</div>
						</div>
						<div id="blog_subscription-2" class="widget jetpack_subscription_widget">
							<h5 class="widget-title"><label for="subscribe-field">Subscribe via Email</label></h5>
							<form action="" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2">
								<p id="subscribe-text">Enter your email address to subscribe to our website and receive notifications of news by email.</p>
								<p id="subscribe-email"><input class="form-control" type="text" name="email" style="width: 95%; padding: 1px 2px"  placeholder="subscribe" id="subscribe-field"/></p>
								<p id="subscribe-submit">
									<input type="submit" class="btn btn-primary" id="subscribe" value="Subscribe"  />
								</p>
							</form>		
						</div>
						<div id="nav_menu-2" class="widget widget_nav_menu">
							<h5 class="widget-title">More About Us</h5>
							<div class="menu-main-navigation-container">
								<ul id="menu-main-navigation-1" class="menu">
									<li><a>Home</a></li>
									<li><a>Home</a></li>
									<li><a>Home</a></li>
									<li><a>Home</a></li>
									<li><a>Home</a></li>
									<li><a>Home</a></li>
								</ul>
							</div>
						</div>
						<div class="clearfix"></div>
					</div><!-- close .width-container -->
				</div><!-- close #footer-widgets -->
		
				<div class="width-container">		
					<div id="copyright">&copy; 2014 All Rights Reserved.</div>		
					<div class="clearfix"></div>
				</div><!-- close .width-container -->
			</footer>
		</div>

	</div>
	<script>
		function page_style(color){
			var link = document.createElement('link');
			document.getElementById("colorpage").remove();
			link.rel = "stylesheet";
			link.type = "text/css";
			link.id = "colorpage";

			switch (color)
			{
				case 'red':
					link.href = "css/cc0000.css";				
					break;
				case 'green':
					link.href = "css/4dc081.css";
					break;
				case 'blue' :
					link.href = "css/2e75b6.css";
					break;
				case 'yellow':
					link.href = "css/ffc000.css";
					break;
				}
	
				document.head.appendChild(link);
			}
		</script>
		<script type="text/javascript" src="js/custom.js"></script>
	</body>
</html>


				